<template>
    <div>
        <div style="height: 50px;">
            <div @click="back" style="float: left; margin-top: 5px; margin-left: 15px;">
                <img src="../../assets/themes/images/exit.png" height="30" width="30" />
            </div>
        </div>
        <h5 style="text-align:center;  color: #FF5151; margin: 0px;">join us</h5>
        <h3 style="text-align:center; font-weight: bold; color: #FF5151; margin-top: 15px;">create you account</h3>
        <!-- <br /> -->
        <div style="width: 90%; margin-left: 5%; margin-top: 40px;">
            <van-field
            v-model="phonenum"
            placeholder="请输入手机号"
            clearable
            :error-message="phonemsg"
            label='手机号'
            required
            @input="check_phone"
            />
            <van-field
            v-model="emailnum"
            placeholder="请输入你的邮箱"
            clearable
            :error-message="emailmsg"
            label='邮箱'
            required
            @input="check_email"
            />
            
            <van-field
            v-model="password"
            type="password"
            placeholder="请输入密码"
            clearable
            required
            label='密码'
            />
            <van-field
            v-model="password_y"
            type="password"
            placeholder="请确认密码"
            clearable
            required
            label='确认密码'
            :error-message="passwdmsg"
            @input="check_passwd"
            />
            
            <van-field
              v-model="sms"
              center
              clearable
              type='number'
              label="验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button :disabled="sms_flag" size="small" type="primary" color='#FF5151' @click='sendcode'>{{  buttonmsg  }}</van-button>
              </template>
            </van-field>
            <br />
            <van-button class="register_btn" @click="register"><label style="margin-top: 3px; color: white;">注 册</label></van-button>
        </div>
    </div>
</template>


<script>
import Vue from 'vue'    
// vant中的输入框
import Field from 'vant';
import 'vant/lib/field/style';
Vue.use(Field)
import Button from 'vant';
import 'vant/lib/button/style';
Vue.use(Button);
import '@vant/touch-emulator'

export default {
    data() {
        return {
            public_key:'',
            phonenum:'',
            phonemsg:'',
            emailnum:'',
            emailmsg:'',
            password:'',
            password_y:'',
            passwdmsg:'',
            sms:'',
            sms_y:'',
            sms_flag:false,
            buttonmsg:'发送验证码'
        };
    },
    mounted: function(){
        this.$axios.get('user_abt/get_public/')
                .then(res=>{
                    this.public_key = res.data
                    // console.log(res.data.length)
                })
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
        
        check_phone(){
            if (this.phonenum === '') {
                this.phonemsg = ''
            }
            else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phonenum)) {
                this.phonemsg = '手机号格式不对'
            }
            else {
                this.phonemsg = ''
            }
        },
        
        check_email(){
            if (this.emailnum === '') {
                this.emailmsg = ''
            }
            else if (!/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(this.emailnum)) {
                this.emailmsg = '邮箱格式不对'
            }
            else {
                this.emailmsg = ''
            }
        },
        
        check_passwd(){
            if (this.password === this.password_y && this.password_y.length >= 8) {
                this.passwdmsg = ''
            }
            else if (this.password != this.password_y){
                this.passwdmsg = '两次密码输入不一致'
            }
            else {
                this.passwdmsg = '密码长度不符合要求'
            }
        },
        
        sendcode () {
            if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phonenum) || this.phonenum===""){
                alert('请输入正确的手机号')
            }
            else{
                let time = 30
                let timer
                timer = setInterval(()=>{
                    time --
                    if (time === 0) {
                        clearInterval(timer)
                        this.sms_flag=false
                        this.buttonmsg = '发送验证码'
                        return
                    }
                    else{
                        this.sms_flag = true
                        this.buttonmsg = time
                    }
                },1000)
                // 向后端服务器发送手机号，如果手机号已经注册就不返回验证码，并且验证码提交按钮不进入计时。
                // 如果手机号没注册就返回验证码，并且验证码提交按钮进入计时
                this.$axios.post('user_abt/sendphone/',{
                    data:{phone:this.phonenum}
                }).then(res=>{
                    if (res.data['status']===0){
                        // this.getcode()
                        alert(res.data['message'])
                        return
                    }
                    else{
                        alert(res.data['message'])
                        clearInterval(timer)
                        this.sms_flag=false
                        this.buttonmsg = '发送验证码'
                        return
                    }
                })
                
            }
        },
        // getcode () {
        //     this.$axios.get('http://127.0.0.1:8000/v1/api/user/getcode/')
        //         .then(res=>{
        //             this.sms_y = res.data
        //             console.log(this.sms_y)
        //         })
        // },
        
        register(){
            // 判断是否能提交。此处可以优化！！！
            if (this.passwdmsg!='' || this.emailmsg!='' || this.phonemsg!='' || this.passwdnum==='' || this.emailnum==='' || this.phonenum===''){
                alert("信息输入不完整或有误")
            }
            else{
                alert(this.phonenum, this.public_key)
                this.$axios.post('user_abt/register/',{
                    data:{
                        phone:this.$jsEncrypt(this.phonenum, this.public_key),
                        email:this.$jsEncrypt(this.emailnum, this.public_key),
                        password:this.$jsEncrypt(this.password,this.public_key),
                        sms:this.$jsEncrypt(this.sms,this.public_key),
                    }
                }).then(res =>{
                    if (res.data['status']===0){
                        // this.getcode()
                        alert(res.data['message'])
                        this.$router.push({path:'/login'})
                        return
                    }
                    else{
                        alert(res.data['message'])
                        return
                    }
                })
            // console.log("aa"+this.phone, this.public_key)
            }
            
        },
    }
}
</script>

<style>
.register_btn{
    width: 96%; 
    margin-left: 2%; 
    height: 50px; 
    border-radius: 20px;
    text-align: center;
    background-color: #FF5151;
}
</style>